<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - Z时代</title>
        <script src="/zpro/lib/tailwindcss.3.4.16.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .custom-shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
    </style>
</head>
<body class="bg-gray-50 text-gray-900">
    <!-- 顶部导航 -->
    <nav class="bg-white border-b border-gray-200 sticky top-0 z-50">
        <div class="max-w-6xl mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 bg-black text-white rounded-full flex items-center justify-center font-bold">Z</div>
                    <span class="text-xl font-bold">时代</span>
                </div>
            </div>
        </div>
    </nav>

    <!-- 注册表单 -->
    <div class="max-w-md mx-auto px-4 pt-16">
        <div class="bg-white custom-shadow p-6 rounded-2xl">
            <h2 class="text-2xl font-bold mb-6">注册Z时代</h2>
            <form class="space-y-4" action="/zpro/user/register" method="post">
                <div>
                    <span style="color:red">
                        ${msg}
                    </span>
                </div>
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
                    <input type="text" id="username" name="username" 
                           class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700">邮箱</label>
                    <input type="email" id="email" name="email" 
                           class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                    <input type="password" id="password" name="password" 
                           class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label for="confirm-password" class="block text-sm font-medium text-gray-700">确认密码</label>
                    <input type="password" id="confirm-password" name="confirm-password" 
                           class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                </div>
                <button type="submit" class="w-full bg-black text-white px-6 py-2 rounded-full hover:bg-gray-800 transition-colors">注册</button>
                <p class="text-center text-sm text-gray-600">已有账号？<a href="login.jsp" class="text-blue-500 hover:underline">立即登录</a></p>
            </form>
        </div>
    </div>
</body>
</html>